<template>
	<view class="container" v-if="loaded">
		<view class="box ">

			<view class="cu-item bg-white block">
				<view class="flex position-title padding-top-sm">
					<view class=" text-cut text-bold">{{job.position}}</view>
					<view class="flex-sub reward text-bold">{{job.wage}}</view>
				</view>
				<view class="flex  p-xs mb-sm123  margin-bottom-sm mb-sm">
					<view class="  margin-xs123  padding-tb-sm radius detail">
						<view>{{typeState.wx_name[job.wx_name]}}|{{typeState.work[job.work_type]}}|{{typeState.exp[job.exp]}}|{{job.time}}|
              {{typeState.board[job.board]}}|{{job.age_small+'岁-'+job.age_big+'岁'}}|{{typeState.edu[job.edu]}}| {{job.rest}}
              |{{typeState.social[job.social]}}|{{typeState.contract[job.reward]}}{{job.hour>''?('|'+job.hour):''}}
<!--						{{job.reward!='F'?'推荐佣金|':''}}{{job.price!=undefined&&job.price>'0'?'稳岗奖金':''}}-->
<!--						<span class="text-red" v-if="job.price!=undefined&&job.price>'0'">-->
<!--						{{'(出勤达标奖'+job.price+'元)'}}</span>-->
						</view>
					</view>

				</view>
				<view class="  p-xs height-10 mb-sm">

				</view>

			</view>
			<view class="cu-item bg-white block company" >
				<view class="flex padding-top-sm"  @click="goCompany(job.refund_standard)">
					<view class="shadow  shadow-lg">
<!--						<image :src="job.company.logo" class="shuben png" mode="aspectFit"-->
<!--						 v-if="job.company.logo!=undefined&&job.company.logo>''"></image>-->
						<image :src="imgUrl" class="shuben png" v-if="imgUrl>''"></image>
						<image src="/static/images/shuben.png" class="shuben png" v-else></image>
					</view>

					<view class="title flex-sub padding-top-sm padding-left-sm  radius text-cut">{{job.company}}
					<view class="text-cut">{{job.address}}</view>
					</view>
					<view class="cuIcon-right" style="line-height:60px"></view>
				</view>
				<view class="flex  p-xs margin-bottom-sm mb-sm">
<!--					<view class="flex-twice  margin-xs123   radius detail" v-if="is_apply">-->
<!--						<view v-if="applyArr.apply_status=='success'"> 面试地址：{{job.see}}</view>-->
<!--						<view v-else> 面试地址：申请成功可查看</view>-->
<!--						<view v-if="applyArr.apply_status=='success'"> 面试时间：{{applyArr.interview_at}}</view>-->
<!--						<view > 工作地址：{{job.address}}</view>-->
<!--					</view>-->
					<view class="flex-treble  margin-xs123  radius detail">
						<view> 面试地址：{{(agentData.length==0)?platform.plat_address:agentData.address}}</view>
						<view > 合同类型：{{typeState.contract[job.reward]}}</view>
					</view>
					<!-- <view class="flex-sub reward padding-sm margin-xs radius">{{trainInfo.reward}}</view> -->
				</view>
				<view class="  p-xs margin-bottom-sm mb-sm padding-bottom-sm" >
<!--					<view v-if="is_apply" class="flex">-->
<!--						<view  class="flex-twice" > 联系电话：{{hrTel}}</view>-->
<!--						&lt;!&ndash; <view v-else> 面试地址：申请成功可查看</view> &ndash;&gt;-->
<!--						<view class="flex-sub" > 状态：{{applyState.apply_status[applyArr.apply_status]}}</view>-->
<!--					</view>-->
          <view  class="flex">
            <view  class="flex-treble" > 联系电话(微信号)：{{(agentData.length==0)?platform.plat_tel:agentData.mobile}}</view>
            <!-- <view v-else> 面试地址：申请成功可查看</view> -->
            <view class="flex-sub " style="font-size:20px"> <span class="cuIcon-copy margin-right-lg" @click="copyMsg"></span>
              <span class="cuIcon-phone margin-left" @click="callTel"></span></view>
          </view>
				</view>

			</view>
			<view class="uni-padding-wrap bg-white margin-tb-lg margin-lr-sm text-body">
				<view class="uni-common-mt padding-top-sm">
					<view class="head-title margin-sm padding-left-sm">
						招聘详情
					</view>
					<view class="flex-twice margin-sm margin-xs123  padding-bottom-sm radius detail">
						<!-- <view> {{job.detail}}</view> -->
						<view class="html">

						<mp-html :content="job.detail" />
						</view>
					</view>
				</view>
			</view>

		<view class="flex flex-wrap text-black text-lg pay-row bg-white" style="padding:10px 0 ;bottom: 0;margin: 0">
      <view  class="flex-sub" style="text-align: center" @click="goSee(job.file_path)"><view class="bg-img" >
        <image src="/static/images/fa.png" class="btn-img png" ></image></view>
        招聘方案</view>
      <view class="flex-sub" style="text-align: center"  @click="apply()" v-if="!is_apply"><view class="bg-img" >
        <image src="/static/images/yp.png" class="btn-img png" ></image></view>
        应聘岗位</view>
      <view class="flex-sub" style="text-align: center">
        <button  open-type="share" @click="wx_share" class="share"></button>
        <view class="bg-img" >
        <image src="/static/images/fx.png" class="btn-img png" ></image></view>
        分享岗位</view>
<!--      <button class="payed action-btn" @click="apply()" >应聘岗位</button>-->
<!--			<button class="share action-btn" open-type="share" @click="wx_share">-->
<!--        <view class="bg-img" >-->
<!--          <image src="/static/images/fx.png" class="btn-img png" ></image></view>分享岗位</button>-->

		</view>
	</view>
	<!-- 绑定 -->
	<goReg ref="goReg" :contentHeight="580" @eventBind="Bind($event)"></goReg>
	<goUser ref="goUser" :contentHeight="580" @eventUser="Bind($event)"></goUser>
	</view>

</template>

<script>
// import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue'
import goUser from "@/components/goUser";
// import goReg from "@/components/goReg";

	export default {
		components: {
			goUser,
			// goReg,
		},
		data() {
			return {
				html: '<div>Hello World!</div>',
				job:[],
				applyArr:{},
				loaded:false,
				id:0,
				is_apply:false,
				uId:0,
				hrTel:'',
        agentData:[],
				imgUrl:'',
				typeState:{},
				applyState:{},
				loadingType: 'more',
				titleNViewBackground: '#FFF',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				buyItem:{
					id:12,
					price:3.12,
					pay_status:1,
					},
				videoContext:'',
				worksList: [],
        typeData: [],
        platform: [],
				strings: '',
			};
		},
		onReady: function(res) {
			// this.videoContext = uni.createVideoContext('myVideo');

		},
		onShow() {
			console.log('jobInfo show')
			let t = this;
			let uId = t.uId
			if(uId>"0"&&uId!=undefined){
				this.isApply();
				this.getAgent();

			}
			else{
				// this.$refs.goReg.showModal('regModal');
				// return;
			}
		},
		onShareAppMessage() {
			let uId = uni.getStorageSync('userId');
			let title = this.job.position
			// const promise = new Promise(resolve => {
			// 	resolve({
			// 		title: title+'-职位详情',
			// 		})
			// 	})
			return {
				title: title+'-职位详情',
				path: '/pages/tabbar/tabbar-2/jobInfo?cid='+uId+'&id='+this.id,
				// promise
			}
		},
		onLoad(option) {
			let t = this;
			t.id = option.id;
			let cid = option.cid;
			uni.setStorageSync('cid',cid)
			console.log(option)
			console.log('cid'+cid)

			t.getSys();
			t.getCates();
      t.getTableState();
			// let trainInfo = uni.getStorageSync('trainInfo');
			t.typeState = uni.getStorageSync('jobState');
			if(t.typeState==undefined||t.typeState==''){
				t.getJobState()
			}
			let uId = uni.getStorageSync('userId');
			t.uId = uId;
			wx.showShareMenu();
		},
		methods: {
      copyMsg(){
        let msg = (this.agentData.length==0)?this.platform.plat_tel:this.agentData.mobile
        uni.setClipboardData({
          data:  msg,
          showToast:false,
          success: function () {
            console.log('success');
            uni.showToast({
              title:'信息已复制...',
              mask:true,
              icon:'none',
              duration:3000,
            })
          }
        });
      },
      callTel(){
        uni.makePhoneCall({
          phoneNumber:  (this.agentData.length==0)?this.platform.plat_tel:this.agentData.mobile
        });
      },
      //获取后端配置
      async getSys(){
        let t = this;
        let param = {
          'config_group':'system',
          'enable':'T',
        };

        let data = await this.$http.post(
          'wx/sys_configs', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        t.platform = data
        console.log(t.platform);
      },
      //获取后端代理配置
      async getAgent(){
        let t = this;
        let param = {
          'uid': t.uId
        };

        let data = await this.$http.post(
          'wx/agent_infos', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        t.agentData = data
        console.log(t.platform);
      },
      //获取后端岗位类型
      async getCates(){
        let param = '';
        let t = this;
        let data = await this.$http.get(
          'wx/get_all', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        t.typeData = t.typeData.concat(data)
        console.log(t.typeData);
        this.defaultValue ? this.setDefaultValue() : '';

        this.loadData();
      },
			goCompany(msg){
				console.log(msg)
        if(msg&&(this.agentData.length)!=0){
          uni.showToast({
            title:msg,
            icon:'none',
          })
        }

			},
			async getTableState(){
				let param = 'apply_fors';
				let t = this;
				let data = await this.$http.get(
					'wx/common_get_table_status/'+param, //可以直接放链接(将不启用全局定义域名)
				);
				// t.provinceData=[''];
				// t.citysData = ['请选择']var arr = []
				t.applyState = data

				console.log(data);
			},
			async getJobState(){
				let param = 'jobs';
				let t = this;
				let data = await this.$http.get(
					'wx/common_get_table_status/' + param, //可以直接放链接(将不启用全局定义域名)
				);
				// t.provinceData=[''];
				// t.citysData = ['请选择']var arr = []
				t.typeState = data
				uni.setStorageSync('jobState', data);
				let obj = data.type

				console.log(data);
			},
			Bind(){
				console.log('Bind');
				this.isApply();
				this.getAgent();
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async isApply() {
				let t = this;
				let uId = uni.getStorageSync('userId');
				t.uId = uId;
				let param = {
					jid:t.id,
					uid:t.uId
				};
				// this.loaded = false;
				let data = await this.$http.post(
					'wx/is_apply', //可以直接放链接(将不启用全局定义域名)
					param
				);
				t.is_apply = false;
				if(data!=undefined&&data>''){
					t.is_apply = true;
					t.hrTel = data.user.email
				}

				this.applyArr = data
				console.log(data)
				//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
				// this.loaded = true;

			},
			async loadData() {
				let t = this;

				this.loaded = false;
				let data = await this.$http.get(
					'wx/jobs/'+t.id, //可以直接放链接(将不启用全局定义域名)
				);
				this.job = data
        let themb = this.typeData.filter(item => item.id === this.job.position_type)
				console.log(this.job)
				// console.log(themb)
        this.imgUrl = themb[0].themb
				//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
				this.loaded = true;

			},
			async apply(){
				let t = this;
				let uId = t.uId;
				let userInfo = uni.getStorageSync('userInfo');
				uni.setStorageSync('job',this.job)
				// this.$refs.goUser.showModal('userModal');
				// return;
				// let uId =1;
				if(uId>"0"&&uId!=undefined){
					if(userInfo.name>''&&userInfo.name!=undefined&&userInfo.sex>''&&userInfo.sex!=undefined&&userInfo.birthday>''
					&&userInfo.birthday!=undefined){
						let param = {
							job_id:t.id,
							seeker_id:uId,
							company_id:t.job.company,
							wx_name:t.$wx_name
						};

						let data = await this.$http.post(
							'wx/new_apply', //可以直接放链接(将不启用全局定义域名)
							param,
						);
						this.isApply();
						return;
					}
					else{
						this.$refs.goUser.showModal('userModal');
						return;
					}
				}

				this.$refs.goReg.showModal('regModal');
				return;

			},
      goSee(path){
        let t = this
        console.info("🚀 ~ file:jobInfo method:goSee line:391 -----", path)
        if(path==undefined||path==''){
          uni.showToast({
            title: '无招聘方案附件',
            icon: 'none'
          });
          return
        }
        // let url = this.$IMG_URL+'files/'+path
        let url = path
        uni.showLoading({
          title: '下载文档中...',
          mask: true
        });
        // if(path=='') return
        uni.downloadFile({
          // 示例 url，并非真实存在
          // url: 'http://zzb.aottov.com/uploads/test.pdf',
          url: url,
          success: function (res) {
            uni.showLoading({
              title: '打开文档中...',
              mask: true
            });
            console.log(res)
            const filePath = res.tempFilePath
            uni.openDocument({
              filePath: filePath,
              showMenu: false, // 是否显示右上角菜单
              // fileType: 'pdf',
              success: function (res) {
                console.log('打开文档成功')
              },fail(res) {
                uni.showToast({
                  title: '打开文档失败',
                  icon: 'none'
                });
              }
            })
          },fail(res) {
            uni.showToast({
              title: '文件下载失败',
              icon: 'none'
            });
          }
        })
      },
			wx_share(){
				wx.showShareMenu();
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			gobuy(){
				let uId = uni.getStorageSync('userId');
				// let uId =1;
				if(uId>"0"&&uId!=undefined){
					this.$refs.goBuy.toggleMask();
					return;
				}

				this.$refs.goReg.showModal('regModal');
				return;

			},
			controlFun(e){
				// console.log(111)
				// let pay_stauts = this.obj.pay_status
				let time = e.detail.currentTime.toFixed(0);
				// if(pay_stauts==2){
				// return
				// }
				// // console.log(time)
				if(time > 2&&this.buyItem.pay_status==1){
					this.videoContext.pause();
					// this.$api.msg('试看结束，请购买后观看完整课程')
					uni.showToast({
						title:'试看结束，请购买后观看完整课程',
						icon:'none',
					})
				}
			},
			//购买组件返回的已支付事件响应
			payed(data){
				console.log('已购买，继续播放')
				console.log(this.buyItem)
				this.buyItem = data;
				this.videoContext.play();
			},
			//详情页
			navToDetailPage(item) {
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				// uni.showToast({
				// 	title: `功能开发中...`,
				// 	icon: 'none'
				// })
				// return
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/works/detail?id=${id}`
				})
			},
		},

	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			margin-top:-20upx;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}
	}
	/* #endif */
	.container{
		padding-top: 0px;

    .share{
      /*background:#4CA5FE;*/
      /*box-shadow: 0px 3px 6px #4CA5FE;*/
      background: transparent;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 99;
    }
	}
	.flex-wrap{
		color: #222 !important;
	}
	.text-title{
		font-size: 16px;
		font-weight: bold;
		list-style: 64px;
		height: 30px;
		justify-content: space-between;
		align-content: center;
	}
	.sub-title{
		font-size: 12px;
		height: 20px;
	}
	.text-body{
		border-radius: 6px;
		min-height: 300px;
	}
	.basis-xs{
		flex-basis: 25%;
		padding: 10px 0;
	}
	.basis-xs20{
		flex-basis: 20%;
	}
	.basis-row{
		flex-basis: 100%;
	}
	.height-10{
		height:10px;
	}
	.myVideo{
		width: 100%;
		height: 240px;
	}
	.myVideoBox{
		margin: 0 !important;
	}
	uni-video{
		width: 100%;
	}
	.company-img{
		width: 64px;
		height: 64px;
	}

	.box{
		// position: fixed;
		left: 0;
		z-index: 990;
		width: 100%;
		.cu-item{
			margin:10px;
			border-radius: 8px;
		}
		.flex{
			margin: 0 15px;
		}
		.right-btn{
			&:after{
				position: relative;
				top: 20px;
				right: 14px;
				bottom: 0;
				display: block;
				margin: auto;
				width: 14px;
				height: 14px;
				color: #8799a3;
				content: "\e6a3";
				text-align: center;
				font-size: 16px;
				font-family: cuIcon;
				line-height: 14px;
			}
		}
	}
	.sub-title{
		image{
			display: inline-block;
			margin-right: 5px;
			width: 15px;
			height: 15px;
			vertical-align: middle;
		}
	}
	page {
		background: #f5f5f5;
	}
	.html{
		// height: 300px;
		// max-height:400px;
		padding: 5px;
		overflow-y: scroll;
		margin-bottom:60px;
	}
	.head-title{
		font-size: 16px;
		font-weight: bold;
		border-left: 3px solid #0081FF;
		line-height: 20px;
		color: #0081FF;


	}
	.shuben{
		width: 58px;
		height: 58px;
		box-shadow: 0px 3px 6px #c1d4e5;
		border-radius: 11px;
	}
  .btn-img{
    width: 32px;
    height: 32px;
  }
	.mb-sm123{
		display: flex;
		border-bottom: 2px #5d9dd3 solid ;
		border-top:0px;
		border-left:0px;
		border-right:0px;
	}
	.m-t{
		margin-top: 16upx;
	}
	.pay-row{
		position: fixed;
		bottom: 10px;
		width: 100%;
		z-index:998;
		.price{
			margin-left: 20px;
			color:gray;
			line-height: 50px;
			width: 40%;
		}
	}

	.max-width{
		max-width: 250px;
		overflow: hidden;
	}
	.position{
		color: #222 !important;
		font-size: 16px !important;
		margin: 0 !important;
		font-weight: bold;
		justify-content: space-between;
	}
	.item>.flex .subText{
		margin: 0 10px;
		height: 50px;
		border-bottom: 1px solid #4CA5FE;
	}

	.flex{
		margin: 0 10px;
	}
	.position-title{
		line-height:32px;
		height:35px;
		font-size: 20px;
	}
	.reward{
		color: #FF4400;
		font-size: 20px;
		text-align: right;

	}
	.action-btn{
		height: 35px;
		padding: 5px 0;
		margin-top: 5px;
		width: 150px;
		background:#FE7D4C;
		border-radius: 4rem;
		font-size:16px;
		line-height: 28px;
		color:white;
	}

  button::after{
    border: 0;
  }
	.line{
		margin-top: 5px;
		border-top: 1px solid #4CA5FE;
	}

	.cu-avatar{
		width: 50upx;
		height: 50upx;
	}
	.company{

		line-height: 22px;
	}
	.action-box{
		text-align: right;
	}
	.join-btn{
		width: 90px;
		font-size: 16px;
	}



</style>
